<template>
  <div class="column column--full">
    <header class="header header--primary">
      <h2 class="title">
        <a class="link">{{ props.contTitle.title }}</a>
      </h2>
    </header>
    <div class="element element--carousel carousel-headlines dflex">
      <div class="slides" ref="slideElement" :style="{ transform: 'translateX(' + translateX + 'px)' }">
        <!-- v-show="index === currentIndex" -->
        <!-- <imgTextMd :lastRightData='item' ref="child" v-for="(item, index) in totalSlides" :key="index"
                    class="side"></imgTextMd> :style="{ flex: '0 0 ' + (100 / 4) + '%' }" -->
        <div class="side">
          <swiper :lastRightData="props.lastmoneyData" v-for="(item, index) in props.lastmoneyData" :key="index"
            ref="child" :flexWidth="flexWidth">
          </swiper>
        </div>
      </div>
      <!-- 此处还有长度判断问题未优化 -->
    </div>
    <div class="dot-d">
      <button @click="prevSlide" class="btn">
        <el-icon>
          <ArrowLeftBold />
        </el-icon>
      </button>
      <div class="dots">
        <span v-for="(img, index) in totalDots" :key="index"
          :class="{ dot: true, active: index === currentIndex / visibleSlides }"
          @click="goToSlide(index, index * visibleSlides)"></span>
      </div>
      <button @click="nextSlide" class="btn nextB">
        <el-icon>
          <ArrowRightBold />
        </el-icon>
      </button>
    </div>
    <div class="btn-center">
      <div class="group--buttons">
        <a class="btn btn--secondary">{{ props.contTitle.seeTitle }}</a>
        <p class="paragraph"></p>
      </div>
    </div>
  </div>
</template>
<script setup>
import swiper from "./swiper.vue";
const props = defineProps(["lastmoneyData", "contTitle"]);
const currentIndex = ref(0);
const cuIndex = ref(0);
let timer = ref(null);
const totalSlides = ref(props.lastmoneyData.length);
const translateX = ref(0);
const slideElement = ref(null);
const slideWidth = ref(315); // Adjust this value based on your design
const visibleSlides = ref(4);
const flexWidth = ref(24.5);
const totalDots = ref(3);
const dataList = computed(() => {
  const newDataList = [];
  let current = 0;
  if (props.lastmoneyData && props.lastmoneyData.length > 0) {
    for (let i = 0; i <= props.lastmoneyData.length - 1; i++) {
      if (i % 4 !== 0 || i === 0) {
        if (!newDataList[current]) {
          newDataList.push([props.lastmoneyData[i]]);
        } else {
          newDataList[current].push(props.lastmoneyData[i]);
        }
      } else {
        current++;
        newDataList.push([props.lastmoneyData[i]]);
      }
    }
  }
  return [...newDataList];
});
//定义swiperNew,目的获取非响应式swiper
const updateTranslateX = () => {
  translateX.value = -cuIndex.value * slideWidth.value;
};
watch(currentIndex, () => {
  updateTranslateX();
});
const nextSlide = () => {
  if (currentIndex.value < totalSlides.value - visibleSlides.value) {
    currentIndex.value += visibleSlides.value;
    cuIndex.value += 1;
  } else {
    currentIndex.value = 0;
    cuIndex.value = 0;
  }
};

const prevSlide = () => {
  if (currentIndex.value > 0) {
    currentIndex.value -= visibleSlides.value;
    cuIndex.value -= 1;
  } else {
    currentIndex.value =
      totalSlides.value - Math.min(totalSlides.value, visibleSlides.value);
    cuIndex.value = Math.min(totalSlides.value / visibleSlides.value) - 1;
  }
};
const goToSlide = (idx, index) => {
  cuIndex.value = idx; //当前index
  currentIndex.value = index;
};

const handleResize = () => {
  // 后续还需要优化小屏幕宽度百分比
  if (window.innerWidth > 1280) {
    visibleSlides.value = 4;
  } else if (window.innerWidth <= 1280 && window.innerWidth > 768) {
    visibleSlides.value = 3;
  } else {
    visibleSlides.value = 2;
  }
  const elementWidth = slideElement.value.clientWidth;
  slideWidth.value = elementWidth + 10;
  totalDots.value = Math.ceil(totalSlides.value / visibleSlides.value);
  flexWidth.value = (100 / visibleSlides.value).toFixed(2) - 0.5;
  updateTranslateX();
};
window.addEventListener("resize", handleResize);
onBeforeUnmount(() => {
  window.removeEventListener("resize", handleResize);
});
onMounted(() => {
  if (window.innerWidth > 1280) {
    visibleSlides.value = 4;
  } else if (window.innerWidth <= 1280 && window.innerWidth > 768) {
    visibleSlides.value = 3;
  } else {
    visibleSlides.value = 2;
  }
  const elementWidth = slideElement.value.clientWidth;
  slideWidth.value = elementWidth + 10;
  totalDots.value = Math.ceil(totalSlides.value / visibleSlides.value);
  flexWidth.value = (100 / visibleSlides.value).toFixed(1) - 0.5;
  updateTranslateX();
});
</script>
<style scoped lang="scss">
.el-carousel__item {
  display: flex;
}

.slides {
  display: flex;
  justify-content: space-between;
  width: 100%;
  transition: transform 0.5s;

  // overflow: hidden;
  :deep(.element--article) {
    min-height: 370px;
  }
}

.side {
  display: flex;
  height: 100%;
  flex-wrap: nowrap;
  width: 100%;
}

.disNone {
  display: none;
}

.dflex {
  position: relative;
  overflow: hidden;
}

.dot-d {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 12px;
  margin-bottom: 30px;
  margin-left: -16px;

  .dots {
    margin: -3px 15px 0;

    .dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #ccc;
      margin: 0 5px;
      cursor: pointer;
    }

    .dot.active {
      background-color: #333;
    }
  }
}

.btn-center {
  width: 100%;
  margin-bottom: 40px;

  .group--buttons {
    width: 100%;
    display: flex;
    min-width: 280px;
    justify-content: center;

    .btn {
      min-width: 280px;
    }
  }
}

.title {
  text-align: left;
}

.dflex {
  :deep(.element--article) {
    flex: 0 0 25%;
    max-width: inherit;
  }

  :deep(.element--article:nth-child(4n-3)) {
    margin-left: 0;
  }
}

.btn--secondary {
  background: #ffbc00;
}

.btn--secondary:hover {
  background: #f2b302;
}
</style>
